<template>
	<view>
		<Lucky v-if="type=='lucky'" @gestureEnd="gestureEnd" @gestureStart="canvasStartTouch=true"></Lucky>
		<DrawResult v-else-if="type=='result'" :tryDo="tryDo"></DrawResult>
		<OpenBox v-if="type=='opening'"></OpenBox>
	</view>
</template>

<script>
	import Lucky from './components/Lucky.vue';
	import DrawResult from './components/drawResult.vue';
	import OpenBox from './components/OpenBox.vue';
	export default {
		components: {
			Lucky,
			DrawResult,
			OpenBox
		},
		data() {
			return {
				type: 'lucky',
				tryDo: '',
				// openTimer: null,
				enterTime: null,
				canvasStartTouch: false,
				canvasEndTouch: false,
			}
		},
		watch: {
			// 监听 store里面的数据
			"$store.state.openMagicBox": {
				deep: true,
				handler: function(newValue, oldValue) {
					if (newValue.length >= 1) {
						uni.setStorageSync('openMagicBox', newValue);
						let nowDate = new Date().getTime();
						// console.log('开盒接口有数据', this.enterTime, nowDate - this.enterTime);
						// 接口响应时间大于10秒立即开，否则10秒-接口响应时间
						if (nowDate - this.enterTime > 10000) {
							if (this.canvasEndTouch) {
								// 是否触摸结束
								this.shakeOpen();
								return
							}
							if (this.tryDo != 1) {
								this.shakeOpen();
							}
						} else {
							if (this.tryDo != 1) {
								// console.log('不是试玩', 10000 - (nowDate - this.enterTime));
								if (this.canvasEndTouch) {
									// 是否触摸结束
									this.shakeOpen();
									return
								}
								setTimeout(() => {
									if (!this.canvasStartTouch) {
										// 手指没触摸,自动
										this.shakeOpen();
									}
								}, 10000 - (nowDate - this.enterTime));
							}

						}
					}
				}
			}
		},
		onBackPress() {
			// console.log('onBackPress',this.$store.state.openMagicBox)
			if(this.$store.state.openMagicBox.length==0){
				return true;
			}
			if (this.type == 'lucky' || this.type == 'opening') {
				return true;
			} else {
				return false;
			}
		},
		mounted() {
			// this.stopReturnPrePage();
		},
		onLoad(options) {
			let pages = getCurrentPages();
			if (pages.length == 1) {
				this.$util.redirectTo('/pages/magic-box/index/index');
				return;
			}
			this.enterTime = new Date().getTime();
			this.tryDo = options.try || '';
			// if (this.tryDo != 1) {
			// this.openTimer = setTimeout(() => {
			// 	this.type = 'opening';
			// 	setTimeout(() => {
			// 		this.type = 'result';
			// 	}, 2000)
			// }, 10000);
			// }
		},
		onUnload() {
			console.log('卸载-----', this);
			uni.removeStorageSync('openMagicBox');
			this.$store.commit('setOpenMagicBox', []);
			// clearTimeout(this.openTimer);
			// this.openTimer = null;
			// // #ifdef H5
			// // 卸载禁止返回上一页
			// window.removeEventListener("popstate", window.pushStateFun, false);
			// // #endif
		},
		methods: {
			// stopReturnPrePage() {
			// 	// #ifdef H5
			// 	const that = this;
			// 	let path = document.URL;
			// 	window.pushStateFun = function() {
			// 		if (that.type == 'lucky' || that.type == 'opening') {
			// 			window.history.pushState(null, null, path);
			// 		} else {
			// 			history.back();
			// 		}
			// 	}
			// 	window.history.pushState(null, null, path);
			// 	window.addEventListener("popstate", window.pushStateFun, false);
			// 	// #endif
			// },
			// 摇晃盒子并打开
			shakeOpen() {
				this.type = 'opening';
				setTimeout(() => {
					this.type = 'result';
				}, 2000)
			},
			gestureEnd() {
				// clearTimeout(this.openTimer);
				// this.openTimer = null;
				this.type = 'opening';
				this.canvasEndTouch = true;
				console.log('this.$store.state.openMagicBox', this.$store.state.openMagicBox);
				if (this.$store.state.openMagicBox.length >= 1) {
					uni.setStorageSync('openMagicBox', this.$store.state.openMagicBox);
					setTimeout(() => {
						this.type = 'result';
					}, 2000)
				}
			},
		},
	}
</script>


<style lang="scss" scoped>

</style>
